<template>
    <div class="app-container">
       <dataShow :total="total" :isSHow="true" />
        <!-- 查询 -->
        <el-row>
            <el-col class="mb-4">
                <el-input v-model="query.company" class="ya-search-value mr-6 mb-2" placeholder="公司名称" clearable/>
                <el-input v-model="query.name" class="ya-search-value mr-6 mb-2" placeholder="收款商户" clearable/>
                <el-select v-model="query.pay_type" clearable class="ya-search-value mr-6 mb-2" placeholder="支付类型">
                    <el-option v-for="(item,index) in payList" :key="index" :value="index+1" :label="item" />
                </el-select>
                <el-date-picker
                    v-model="query.date_value"
                    type="datetimerange"
                    class="ya-date-value mr-6 mb-2"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="search()"
                    popper-class="datetimerange-style"
                    :shortcuts="dateShortcuts"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :default-time="[new Date(2024, 1, 1, 0, 0, 0), new Date(2024, 1, 1, 23, 59, 59)]"
                />
                <el-button class="mb-2" type="primary" @click="search()">查询</el-button>
                <el-button class="mb-2" title="重置" @click="refresh()">重置 </el-button>
                <el-button class="mb-2" @click="getExport">导出 </el-button>
            </el-col>
        </el-row>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="date" align="center" label="时间" />
            <el-table-column prop="company" align="center" label="公司名称" />
            <el-table-column prop="name" align="center" label="商户名称" />
            <el-table-column prop="address" align="center" label="收支类型">
                <template #default="scope">
                    {{ payList[scope.row.pay_type-1] }}
                </template>
            </el-table-column>
            <el-table-column prop="orders" align="center" label="订单数量" />
            <el-table-column prop="refund_orders" align="center" label="退单数量" />
            <el-table-column prop="order_amount" align="center" label="销售金额(元)" />
            <el-table-column prop="pay_real" align="center" label="实付金额(元)" />
            <el-table-column prop="refund_amount" align="center" label="退款金额(元)" />
            <el-table-column prop="recharge_amount" align="center" label="充值金额(元)" />
        </el-table>
        <!-- 分页 -->
        <pagination
            v-show="count > 0"
            v-model:total="count"
            v-model:page="query.page"
            v-model:limit="query.limit"
            @pagination="list"
        />
    </div>
</template>
<script>
import Pagination from '@/components/Pagination/index.vue'
import dataShow from './cps/dataShow.vue'
import { getPageLimit } from '@/utils/settings'
import dayjs from 'dayjs'
import { total,totalExport } from '@/api/finance/index'
import { useUserStoreHook } from '@/store/modules/user'
import { shortcuts } from '@/utils/index'
import axios from 'axios'
export default {
    name: 'saleDetail',
    components: {
        Pagination,
        dataShow
    },
    data () {
        return {
            dateShortcuts: shortcuts,//时间
            payList: [
                '微信',
                '支付宝',
                '余额',
                '微信(第三方)',
                '支付宝(第三方)',
            ],//支付类型
            tableData: [
                {
                    date: '2016-05-03',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-02',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-04',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
                {
                    date: '2016-05-01',
                    name: 'Tom',
                    address: 'No. 189, Grove St, Los Angeles',
                },
            ],//tableData
            count: 0,//总条数
            total: {},//统计
            // 入参
            query: {
                page: 1,
                limit: getPageLimit(),
                pay_type: null,
                company: '',
                name: '',
                date_field: 'date',
                pay_type: '',
                date_value: [
                `${dayjs().startOf('month').format('YYYY-MM-DD')} 00:00:00`,
                `${dayjs().format('YYYY-MM-DD 23:59:59')}`
                ], //默认当天
            },
        }
    },
    mounted () {
        this.list()
    },
    methods: {
        // 搜索
        search () {
            this.query.page = 1
            this.list()
        },
        // 列表
        list () {
            total(this.query).then(res => {
                if (res.code == 200) {
                    this.tableData = res.data.list
                    this.count = res.data.count
                    this.total = res.data.this_total
                }
            })
        },
        // 导出
        getExport () {
            // let url = import.meta.env.VITE_APP_BASE_URL+'/admin/manage.Summary/totalExport'
            let url = window.location.origin+'/admin/manage.Summary/totalExport'
            this.downLoadFile(url,'get', this.query)
        },
        downLoadFile(url, method = 'get', params ={}) {
            const userStore = useUserStoreHook()
            const tokenValue = userStore.token
            axios({
                method,
                url,
                params,
                headers: {
                    'Admintoken': tokenValue
                },
                responseType: 'blob',
            }).then(res => {
                    const blob = new Blob([res.data], { type: 'application/vnd.ms-excel' });
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.setAttribute('download', '销售流水.xlsx'); // 导出文件名
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
            })
        },
        gbkconvert(gbkStr, callback) {
            var script = document.createElement('script');
            script.id = 'gbkconvert';
            script.src = 'data:text/javascript;charset=utf-8,gbkconvertCb("' + gbkStr + '");';
            document.body.appendChild(script);
            window.gbkconvertCb = (res) => {
                callback && callback(res);
            }
        },
        // 刷新
        refresh() {
            const limit = this.query.limit
            this.query = this.$options.data().query
            this.query.limit = limit
            this.list()
        },
    }
}
</script>